10分钟学会JavaScript

1 September 2025 — 编程语言

JavaScript是一种高级解释型编程语言，以其多功能性和在Web开发中的广泛应用而闻名。本教程涵盖现代JavaScript（ES6+）特性，帮助你快速掌握这门语言。

1. 编写第一个JavaScript程序

让我们从一个简单的程序开始。创建一个名为hello.js的文件，输入以下代码：

console.log("Hello, World!");

保存文件并在终端或命令行中运行以下命令：

node hello.js

或者在HTML文件中包含它：

<script>
  console.log("Hello, World!");
</script>

输出将是：

Hello, World!

这个简单的程序展示了JavaScript的基本输出功能。console.log()函数用于在控制台中显示文本信息。

2. 基本语法

JavaScript的语法类似于其他C风格语言。它使用分号结束语句，花括号{}定义代码块。

// 这是单行注释
console.log("Hello, World!");

/*
这是多行注释
可以跨越多行
*/

JavaScript的基本语法规则：

分号：可选但建议使用来结束语句
注释：单行注释以//开头，多行注释使用/* */
大小写敏感：JavaScript区分大小写
代码块：用花括号{}定义

3. 变量和数据类型

在JavaScript中，变量使用let、const或var声明。现代JavaScript推荐使用let和const。

变量声明：

let name = "John"; // 可变变量
const age = 25;     // 不可变常量
var oldWay = "deprecated"; // 避免使用var

JavaScript的主要数据类型：

数字：42、3.14、-10
字符串："hello"、'world'、`template`
布尔值：true、false
未定义：undefined（变量已声明但未赋值）
空值：null（有意表示无值）
对象：{key: "value"}、[1, 2, 3]
符号：Symbol("description")（ES6+）
大整数：1234567890123456789012345678901234567890n（ES2020+）

3.1 数字类型

JavaScript对所有数值使用64位浮点数。

let integer = 42;
let float = 3.14159;
let scientific = 2.5e3; // 2500
let hex = 0xFF;         // 255
let binary = 0b1010;    // 10
let octal = 0o10;       // 8

3.2 字符串类型

字符串可以用单引号、双引号或模板字面量创建。

let single = '单引号字符串';
let double = "双引号字符串";
let template = `模板字面量`;

// 带插值的模板字面量
let name = "Alice";
let greeting = `你好，${name}！`; // "你好，Alice！"

字符串操作：

let text = "JavaScript编程";
console.log(text.length);        // 字符串长度：13
console.log(text.toUpperCase()); // "JAVASCRIPT编程"
console.log(text.toLowerCase()); // "javascript编程"
console.log(text[0]);            // 第一个字符："J"
console.log(text.slice(0, 10)); // "JavaScript"

3.3 布尔类型

布尔类型有两个值：true和false。

let isActive = true;
let isComplete = false;

// 布尔运算
let result1 = true && false;  // false
let result2 = true || false;  // true
let result3 = !true;          // false

3.4 未定义和空值

undefined表示变量已声明但未赋值。null表示有意没有任何值。

let unassigned; // undefined
let empty = null;

if (unassigned === undefined) {
  console.log("变量未定义");
}

if (empty === null) {
  console.log("值为空");
}

4. 数据结构

4.1 数组

数组是有序、可变的值的集合。

let numbers = [1, 2, 3, 4, 5];
numbers.push(6);        // 添加元素：[1, 2, 3, 4, 5, 6]
numbers.pop();          // 移除最后一个：[1, 2, 3, 4, 5]
numbers.unshift(0);     // 添加到开头：[0, 1, 2, 3, 4, 5]
numbers.shift();        // 移除第一个：[1, 2, 3, 4, 5]
numbers[0] = 10;        // 修改：[10, 2, 3, 4, 5]

数组方法：

let fruits = ["苹果", "香蕉", "橙子"];

// 迭代
fruits.forEach(fruit => console.log(fruit));

// 转换
let lengths = fruits.map(fruit => fruit.length); // [2, 2, 2]

// 过滤
let longFruits = fruits.filter(fruit => fruit.length > 2); // ["香蕉", "橙子"]

// 查找
let hasApple = fruits.includes("苹果"); // true
let bananaIndex = fruits.indexOf("香蕉"); // 1

4.2 对象

对象是键值对的集合。

let person = {
  name: "John",
  age: 30,
  city: "纽约",
  isStudent: false
};

// 访问属性
console.log(person.name);       // "John"
console.log(person["age"]);     // 30

// 添加属性
person.country = "美国";
person["occupation"] = "开发者";

// 删除属性
delete person.isStudent;

// 对象方法
let keys = Object.keys(person);    // ["name", "age", "city", "country", "occupation"]
let values = Object.values(person); // ["John", 30, "纽约", "美国", "开发者"]
let entries = Object.entries(person); // [["name", "John"], ["age", 30], ...]

4.3 集合

集合是唯一值的集合。

let numbers = new Set([1, 2, 3, 3, 4, 4, 5]);
console.log(numbers); // Set {1, 2, 3, 4, 5}

// 集合操作
numbers.add(6);       // 添加值
numbers.delete(1);    // 移除值
numbers.has(2);       // true
numbers.size;         // 5

// 迭代
numbers.forEach(num => console.log(num));

4.4 映射

映射是键值对的集合，任何数据类型都可以作为键。

let map = new Map();
map.set("name", "Alice");
map.set(1, "数字一");
map.set(true, "布尔真");

console.log(map.get("name"));    // "Alice"
console.log(map.has(1));         // true
console.log(map.size);           // 3

// 迭代
for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}

5. 操作符

JavaScript提供各种操作符用于计算和比较。

算术：+、-、*、/、%、**（指数）
比较：==、===、!=、!==、>、<、>=、<=
逻辑：&&、||、!
赋值：=、+=、-=、*=、/=、%=
三元：条件 ? 表达式1 : 表达式2

5.1 算术操作符

let a = 10, b = 3;

console.log(a + b);   // 13
console.log(a - b);   // 7
console.log(a * b);   // 30
console.log(a / b);   // 3.333...
console.log(a % b);   // 1
console.log(a ** b);  // 1000

5.2 比较操作符

let x = 5, y = 10;

console.log(x == y);    // false
console.log(x === y);   // false（严格相等）
console.log(x != y);    // true
console.log(x !== y);   // true（严格不等）
console.log(x > y);     // false
console.log(x < y);     // true
console.log(x >= y);    // false
console.log(x <= y);    // true

5.3 逻辑操作符

let a = true, b = false;

console.log(a && b);   // false
console.log(a || b);   // true
console.log(!a);       // false

6. 控制流程

6.1 if语句

let age = 20;

if (age >= 18) {
  console.log("成年人");
} else if (age >= 13) {
  console.log("青少年");
} else {
  console.log("儿童");
}

6.2 switch语句

let day = "Monday";

switch (day) {
  case "Monday":
    console.log("周一开始");
    break;
  case "Friday":
    console.log("周末快到了");
    break;
  default:
    console.log("普通日子");
}

6.3 for循环

// 传统for循环
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// for...of循环（数组、字符串）
let fruits = ["苹果", "香蕉", "橙子"];
for (let fruit of fruits) {
  console.log(fruit);
}

// for...in循环（对象属性）
let person = {name: "John", age: 30};
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

6.4 while循环

// while循环
let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

// do...while循环
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

6.5 break和continue

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // 退出循环
  }
  if (i % 2 === 0) {
    continue; // 跳过偶数
  }
  console.log(i); // 1, 3
}

7. 函数

函数是可重用的代码块。

7.1 函数声明

function greet(name) {
  return `你好，${name}！`;
}

console.log(greet("Alice")); // "你好，Alice！"

7.2 函数表达式

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(4, 5)); // 20

7.3 箭头函数（ES6+）

const add = (a, b) => a + b;
const square = x => x * x;
const greet = name => `你好，${name}！`;

console.log(add(2, 3));      // 5
console.log(square(4));      // 16
console.log(greet("Bob"));   // "你好，Bob！"

7.4 默认参数

function createUser(name, age = 18, isActive = true) {
  return {name, age, isActive};
}

console.log(createUser("John"));        // {name: "John", age: 18, isActive: true}
console.log(createUser("Alice", 25));  // {name: "Alice", age: 25, isActive: true}

7.5 剩余参数

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10
console.log(sum(5, 10, 15));  // 30

7.6 展开操作符

let numbers = [1, 2, 3];
let moreNumbers = [4, 5, 6];
let allNumbers = [...numbers, ...moreNumbers]; // [1, 2, 3, 4, 5, 6]

let person = {name: "John", age: 30};
let updatedPerson = {...person, city: "纽约"}; // {name: "John", age: 30, city: "纽约"}

8. 类和对象（ES6+）

8.1 类声明

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    return `我是${this.name}，今年${this.age}岁`;
  }

  haveBirthday() {
    this.age++;
    return `${this.name}过生日了，现在${this.age}岁`;
  }
}

let person = new Person("John", 25);
console.log(person.introduce());      // "我是John，今年25岁"
console.log(person.haveBirthday());   // "John过生日了，现在26岁"

8.2 继承

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    return `${this.name}发出声音`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name, "狗");
    this.breed = breed;
  }

  makeSound() {
    return `${this.name}汪汪叫`;
  }

  fetch() {
    return `${this.name}接球`;
  }
}

let dog = new Dog("Buddy", "金毛寻回犬");
console.log(dog.makeSound()); // "Buddy汪汪叫"
console.log(dog.fetch());     // "Buddy接球"

8.3 Getter和Setter

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  get diameter() {
    return this.radius * 2;
  }

  set diameter(diameter) {
    this.radius = diameter / 2;
  }

  get area() {
    return Math.PI * this.radius ** 2;
  }
}

let circle = new Circle(5);
console.log(circle.diameter); // 10
console.log(circle.area);     // 78.53981633974483

circle.diameter = 20;
console.log(circle.radius);   // 10

9. 异步JavaScript

9.1 回调函数

function fetchData(callback) {
  setTimeout(() => {
    callback("数据已接收");
  }, 1000);
}

fetchData(data => {
  console.log(data); // 1秒后输出"数据已接收"
});

9.2 Promise

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("数据已接收");
      // reject("发生错误");
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data)) // "数据已接收"
  .catch(error => console.error(error));

9.3 async/await（ES2017+）

async function getData() {
  try {
    let data = await fetchData();
    console.log(data); // "数据已接收"
  } catch (error) {
    console.error(error);
  }
}

getData();

9.4 Fetch API

async function getUser() {
  try {
    let response = await fetch('https://api.example.com/user');
    let user = await response.json();
    console.log(user);
  } catch (error) {
    console.error('错误:', error);
  }
}

10. 错误处理

try {
  let result = 10 / 0;
  if (!isFinite(result)) {
    throw new Error("除以零");
  }
  console.log(result);
} catch (error) {
  console.error("错误:", error.message);
} finally {
  console.log("这里总是执行");
}

11. 模块（ES6+）

11.1 导出

// math.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export default function multiply(a, b) {
  return a * b;
}

11.2 导入

// main.js
import multiply, { PI, add } from './math.js';

console.log(PI);           // 3.14159
console.log(add(2, 3));    // 5
console.log(multiply(4, 5)); // 20

12. 现代JavaScript特性

12.1 解构

// 数组解构
let [first, second, third] = [1, 2, 3];
console.log(first, second, third); // 1 2 3

// 对象解构
let {name, age} = {name: "John", age: 30, city: "NY"};
console.log(name, age); // John 30

// 函数参数解构
function greet({name, age}) {
  return `你好${name}，你今年${age}岁`;
}

12.2 模板字面量

let name = "Alice";
let age = 25;

// 基本插值
let greeting = `你好，${name}！`;

// 多行字符串
let message = `
  姓名：${name}
  年龄：${age}
  状态：${age >= 18 ? "成年人" : "未成年人"}
`;

// 表达式求值
let calculation = `2 + 3 = ${2 + 3}`; // "2 + 3 = 5"

12.3 可选链（?.）

let user = {
  profile: {
    name: "John",
    address: {
      city: "纽约"
    }
  }
};

console.log(user?.profile?.name);           // "John"
console.log(user?.profile?.age);            // undefined
console.log(user?.profile?.address?.city);  // "纽约"
console.log(user?.employment?.company);     // undefined（不会报错）

12.4 空值合并（??）

let name = "";
let age = 0;
let city = null;
let country = undefined;

console.log(name || "未知");    // "未知"（空字符串为假值）
console.log(name ?? "未知");    // ""（仅null/undefined）

console.log(age || 18);           // 18（0为假值）
console.log(age ?? 18);           // 0（仅null/undefined）

console.log(city ?? "未知");   // "未知"
console.log(country ?? "美国");    // "美国"

13. 有用的数组方法

let numbers = [1, 2, 3, 4, 5];

// map：转换每个元素
let squares = numbers.map(n => n * n); // [1, 4, 9, 16, 25]

// filter：选择元素
let evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// reduce：累加值
let sum = numbers.reduce((total, n) => total + n, 0); // 15

// find：查找第一个匹配元素
let firstEven = numbers.find(n => n % 2 === 0); // 2

// some：检查是否有元素匹配
let hasEven = numbers.some(n => n % 2 === 0); // true

// every：检查是否所有元素匹配
let allPositive = numbers.every(n => n > 0); // true

// sort：排序元素
let sorted = numbers.sort((a, b) => b - a); // [5, 4, 3, 2, 1]

14. 日期和时间

let now = new Date();
console.log(now.toString());      // 当前日期和时间
console.log(now.getFullYear());   // 当前年份
console.log(now.getMonth());      // 当前月份（0-11）
console.log(now.getDate());       // 当前日期（1-31）
console.log(now.getHours());      // 当前小时（0-23）

// 格式化日期
console.log(now.toLocaleDateString()); // 本地化日期字符串
console.log(now.toLocaleTimeString()); // 本地化时间字符串
console.log(now.toISOString());        // ISO格式字符串

// 创建特定日期
let specificDate = new Date(2025, 0, 1); // 2025年1月1日
let timestamp = new Date(1640995200000); // 从时间戳创建

15. 正则表达式

let text = "你好，我的邮箱是[email protected]，电话是123-456-7890";

// 邮箱模式
let emailPattern = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g;
let emails = text.match(emailPattern); // ["[email protected]"]

// 电话模式
let phonePattern = /\d{3}-\d{3}-\d{4}/g;
let phones = text.match(phonePattern); // ["123-456-7890"]

// test方法
let isValidEmail = emailPattern.test("[email protected]"); // true

// replace方法
let maskedText = text.replace(phonePattern, "XXX-XXX-XXXX");
console.log(maskedText);

JavaScript是一门功能强大且多用途的语言，持续不断发展。本教程涵盖了入门的基本概念，但还有更多高级主题值得探索，包括生成器、代理和Web API等。